import { Line, LineConfig } from '@ant-design/plots';
import { Card } from 'antd';
import React from 'react';

interface Props {
  title: string;
  data: DayNewlyAdd[];
}

const DayNewlyAddLine: React.FC<Props> = (props) => {
  const { title, data } = props;

  const config: LineConfig = {
    data,
    xField: 'day',
    yField: 'num',
    title: title,
    point: {
      shapeField: 'circle',
      sizeField: 2,
    },
    meta: {
      day: {
        alias: '日期',
      },
      num: {
        alias: '数量',
      },
    },
    interaction: {
      tooltip: {
        marker: false,
      },
    },
    style: {
      lineWidth: 2,
    },
  };

  return (
    <>
      <Card>
        <Line {...config} />
      </Card>
    </>
  );
};

export default DayNewlyAddLine;
